<template>
  <div class="echarts-wall">
    <div class="dot-bg" v-if="loading"></div>
    <div class="dot-elastic dotClass" v-if="loading"></div>
    <div class="echarts-content" ref="echartsDom"></div>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import {getCurrentInstance, onMounted, ref} from "vue";
// @ts-ignore
import screen_config, {getPoint} from "@/components/global/bigscreen/screen_config";

defineOptions({
  name: "EchartsLiquidFill"
});
//是否加载loading
const loading = ref<boolean>(false);
const props = defineProps({
  url: {type: String, default: ""},
  //地图请求参数
  params: {type: Object, default: {}},

  color: {
    type: Array, default: function () {
      return  ['#8190E3','#71B1FC'];
    }
  },

  fontSize: {type: Number, default: 64},
  //shape 支持: diamond,roundRect,dolphin,ant,home,arrow,heart
  shape: {type: String, default: ''},
  //值的位置
  seriesLabelColor: {type: String, default: 'red'},
  //
  seriesEmphasisLabelColor: {type: String, default: 'red'},

});
// @ts-ignore
let {proxy} = getCurrentInstance()
// dom 组件
const echartsDom = ref<any>(null);
//
let myEcharts: any = null;
onMounted(() => {
  initData().then((option) => {
    myEcharts = proxy.$echarts.init(echartsDom.value);
    if (myEcharts) {
      myEcharts.clear();
      myEcharts.setOption(option)
    }
  });
})
const shape = () => {
  let shapes = props.shape;
  if (props.shape === 'dolphin') {
    shapes = 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z';
  } else if (props.shape === 'ant') {
    shapes = 'path://M539.22,398.8a20.17,20.17,0,0,0,3-10.91,14,14,0,0,1,6.22-12.12c.58-.41.56-1.79.6-2.74,0-.18-1-.44-1.53-.61a10.21,10.21,0,0,1-2.52-.74,3.21,3.21,0,0,0-3.17-.18,16.22,16.22,0,0,1-5,.34c-.4,0-.8-.54-1.2-.83l.17-.32c.3.09.6.16.89.27a4.36,4.36,0,0,0,4.08-.16c1.9-1.12,3.92-1.5,5.88.08a8.9,8.9,0,0,0,1.79.86c.43-2.45.07-4.19-1.94-5.61-1.13-.8-1.77-2.3-2.59-3.51a4.82,4.82,0,0,1-.58-1.2c-.89-2.69-3.22-3.93-5.38-5.33a8.47,8.47,0,0,1-.86-.64c-.09-.07-.11-.23-.32-.71.74.37,1.22.58,1.67.83,1.32.74,2.66,1.45,3.92,2.28a3.13,3.13,0,0,1,1,1.45,13.54,13.54,0,0,0,4.09,6l1.88-2.86c-2.65-.24-3.22-1.08-2.51-3.8.22-.86.56-1.68.91-2.71-1.3-.4-2.55-.85-3.83-1.17a3,3,0,0,1-2.21-1.94c-1-2.31-1.82-4.69-3.92-6.3-.13-.1-.11-.38.08-.83.42.31,1,.52,1.24.94,1,1.66,1.92,3.41,3,5.06a5.58,5.58,0,0,0,1.66,1.73,19.86,19.86,0,0,0,2.81,1.25c1,.44,2,.88,3.13.07a1.68,1.68,0,0,1,1.42-.13c1.29.57,2.27-.17,3.4-.52,2.45-.75,4.18-2,4.47-4.76a3.2,3.2,0,0,1,2.11-2.53,3.33,3.33,0,0,1-.26.82,9.36,9.36,0,0,0-2,5,1.67,1.67,0,0,1-1.59,1.65c-1.33.26-2.62.7-3.87,1a38.19,38.19,0,0,1,1.09,4c.36,2.31-.35,3.06-2.8,3l1.91,3a46.1,46.1,0,0,0,3-4.59c.74-1.48,1.2-2.93,3-3.58,1.38-.49,2.57-1.55,4.06-2.15a2.18,2.18,0,0,1-.39.65,8.37,8.37,0,0,1-1.66,1.13c-2.62,1.17-3.78,3.5-4.92,5.91a11.72,11.72,0,0,1-2.19,3.19c-2.42,2.44-2.18,2.73-2,5.77a7.21,7.21,0,0,0,1.52-.72c1.88-1.54,3.86-1.32,5.75-.2a4.4,4.4,0,0,0,4.45.1c.2-.09.41-.15.61-.22l.26.36c-.55.34-1.1,1-1.66,1-1.8,0-3.66.35-5.35-.72a2.33,2.33,0,0,0-1.56.07c-1.22.33-2.43.73-3.63,1.13a1.85,1.85,0,0,0-.86.47c-.28.35.41,3,.78,3.36.79.72,1.59,1.43,2.36,2.18,2.78,2.68,3.25,6.16,3.36,9.75a22.41,22.41,0,0,0,2.87,10.44,1.74,1.74,0,0,1-1.64-1.54c-.86-3.41-2.14-6.72-2.29-10.31-.14-3.25-.56-4.16-1.89-5.52a24.93,24.93,0,0,1-.17,4.45,12.52,12.52,0,0,1-1.68,4.17c-1.53,2.36-4.41,2.28-6-.05-1.85-2.67-2.05-5.66-1.53-8.76.06-.35.16-.69.25-1.07a6.81,6.81,0,0,0-2.94,5.69c-.17,3.81-1.31,7.38-2.26,11A2.54,2.54,0,0,1,539.22,398.8Z';
  } else if (props.shape === 'home') {
    shapes = "path://M122.882,128.003 L5.118,128.003 C2.290,128.003 -0.003,125.710 -0.003,122.882 L-0.003,51.199 L64.000,-0.003 L96.593,26.072 L96.593,9.384 C96.593,8.442 97.357,7.678 98.300,7.678 L115.890,7.678 C116.833,7.678 117.597,8.442 117.597,9.384 L117.597,42.875 L128.003,51.199 L128.003,122.882 C128.003,125.710 125.710,128.003 122.882,128.003 ZM77.764,103.593 C77.764,98.070 73.287,93.593 67.764,93.593 L60.236,93.593 C54.713,93.593 50.236,98.070 50.236,103.593 L50.236,128.003 L77.764,128.003 L77.764,103.593 Z";
  } else if (props.shape === 'heart') {
    shapes = 'path://M20.5,9.5c-1.955,0,-3.83,1.268,-4.5,3c-0.67,-1.732,-2.547,-3,-4.5,-3C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z';
  }
  return shapes;
}

const initData = () => {
      return new Promise((resolve, reject) => {
            if (props.url) {
              proxy.$http.post(props.url, props.params)
                  .then((apiResponse: any) => {
                        if (apiResponse.success || apiResponse.data) {
                          let i = 0;
                          let valueData: any = [];
                          //获取的数据
                          let echartsData = apiResponse.data.echartsData;
                          Object.keys(echartsData).forEach((key: string) => {
                            if (i === 0) {
                              for (let x = 0; x < echartsData[key].length; x++) {
                                let data = echartsData[key][x];
                                valueData.push(data.value);
                              }
                            }
                          });
                          //
                          let option: any = {
                                title: [{
                                  show: false,
                                  text: '314人',
                                  x: 'center',
                                  y: '58%',
                                  textStyle: {
                                    fontSize: 34,
                                    color: '#000',
                                  },
                                }, {
                                  text: '重点人群总数',
                                  x: 'center',
                                  y: '75%',
                                  show: false,
                                  textStyle: {
                                    fontSize: 14,
                                    color: '#000',
                                  },
                                }],
                                series: [{
                                  type: 'liquidFill',
                                  radius: '90%',
                                  center: ['50%', '50%'],
                                  color: props.color,
                                  shape: shape(),
                                  data: valueData, // data个数代表波浪数
                                  backgroundStyle: {
                                    borderWidth: 1,
                                    color: 'rgba(117, 205, 255, 0.25)',
                                  },
                                  label: {
                                    normal: {
                                      textStyle: {
                                        fontSize: props.fontSize,
                                        fontWeight: 'bold',
                                        color: props.seriesLabelColor,
                                      },
                                    },
                                    emphasis: {
                                      textStyle: {
                                        fontSize: props.fontSize,
                                        fontWeight: 'bold',
                                        color: props.seriesEmphasisLabelColor,
                                      },
                                    }
                                  },
                                  outline: {
                                    borderDistance: 0,
                                    itemStyle: {
                                      borderWidth: 4,
                                      borderColor: 'transparent',
                                    },
                                  },
                                }
                                ],
                              }
                          ;
                          resolve(option)
                        }
                      }
                  ).catch((err: any) => {
                reject(err);
              })
            }
          }
      )
    }
;
</script>

<style scoped>

</style>